<template>
  <div class="middle">
    <div>
      <el-contailer>
        <div>
          <div class="whole1" style="background-color: white">
            <h1>欢迎登录</h1>
            <div class="hy">
              <el-main>
                <div>
                  <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleFormRef"
                    label-width="100px"
                  >
                    <el-form-item label="账号" style="font-weight: bold" prop="uid">
                      <el-input type="text" maxlength="12" v-model="ruleForm.uid"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" style="font-weight: bold" prop="password">
                      <el-input
                        type="password"
                        v-model="ruleForm.password"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" style="font-weight: bold">
                      <div style="display: flex; float: left; width: 48%">
                        <el-input v-model="codes" autocomplete="off"></el-input>
                      </div>
                      <div style="display: flex; float: right; width: 49%">
                        <verificationCode
                          @drawCode="getCode"
                          ref="child"
                          style="margin-left: 20px"
                        />
                      </div>
                    </el-form-item>
                    <el-form-item label="" prop="type">
                      <el-radio-group v-model="ruleForm.radio">
                        <el-radio label="1" style="font-weight: bold">用户登录</el-radio>
                        <el-radio label="2" style="font-weight: bold">管理员登录</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" style="width: 250px" @click="login">登录</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-main>
              <div>
                <belowColVue />
              </div>
              <div>
                <wxVue />
              </div>
            </div>
          </div>
        </div>
      </el-contailer>
    </div>
  </div>
</template>
<script setup>
import { defineExpose, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import verificationCode from '../components/Client/LoginCom/verificationCode'
import belowColVue from '../components/Client/LoginCom/belowCol.vue'
import wxVue from '../components/Client/LoginCom/wx.vue'
import { SM3 } from '@/utils/sm3.js'
import axios from 'axios'
import router from '@/router/index'
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  password: '',
  uid: '',
  radio: '',
  aid: ''
})
const rules = {
  sPassword: [{ validator: validatePass, trigger: 'blur' }],
  uid: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
  ]
}
const ruleFormRef = ref(null)
const codes = ref('')
const validCode = ref('')
const child = ref(null)
const identifyCode = ref('')
const getCode = (val) => {
  identifyCode.value = val
}
function login() {
  ruleFormRef.value.validate((valid) => {
    console.log(identifyCode)
    if (valid) {
      ruleForm.password = SM3(ruleForm.password)
      if (codes.value === identifyCode.value) {
        if (ruleForm.radio === '1') {
          axios
            .get('/api/login/userLogin/' + ruleForm.uid + '/' + ruleForm.password)
            .then((res) => {
              if (res.data.obj !== null) {
                ElMessage({
                  showClose: true,
                  message: '登陆成功！',
                  type: 'success'
                })
                sessionStorage.setItem('uid', JSON.stringify(res.data.obj.uid))
                sessionStorage.setItem('username', JSON.stringify(res.data.obj.username))
                sessionStorage.setItem('password', JSON.stringify(res.data.obj.password))
                sessionStorage.setItem('gender', JSON.stringify(res.data.obj.gender))
                sessionStorage.setItem('headSrc', JSON.stringify(res.data.obj.headsrc))
                sessionStorage.setItem('phone', JSON.stringify(res.data.obj.phone))
                sessionStorage.setItem('email', JSON.stringify(res.data.obj.email))
                sessionStorage.setItem('addTime', JSON.stringify(res.data.obj.addTime))
                sessionStorage.setItem('vid', JSON.stringify(res.data.obj.vid))
                axios.get('api/vip/isVip/' + res.data.obj.uid).then((res1) => {
                  sessionStorage.setItem('isVip', JSON.stringify(res1.data))
                })
                router.push('/')
              } else {
                ElMessage({
                  showClose: true,
                  message: '用户名或密码错误！',
                  type: 'error'
                })
                ruleForm.password = ''
                codes.value = null
                child.value.refreshCode()
              }
            })
        } else {
          ruleForm.aid = ruleForm.uid
          axios
            .get('/api/login/adminLogin/' + ruleForm.aid + '/' + ruleForm.password)
            .then((res) => {
              if (res.data !== '') {
                ElMessage({
                  showClose: true,
                  message: '登陆成功！',
                  type: 'success'
                })
                sessionStorage.setItem('Admin', res.data.aname)
                sessionStorage.setItem('aid', res.data.aid)
                router.push('/AdminHome')
              } else {
                ElMessage({
                  showClose: true,
                  message: '用户名或密码错误！',
                  type: 'error'
                })
              }
            })
        }
      } else {
        ElMessage({
          showClose: true,
          message: '验证码错误！',
          type: 'error'
        })
        child.value.refreshCode()
        ruleForm.password = null
        codes.value = null
      }
    }
  })
}
onMounted(() => {
  if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
    router.push('LoginMobile')
  }
})
defineExpose({
  ruleForm,
  ruleFormRef,
  child,
  codes,
  validCode,
  identifyCode,
  getCode,
  login
})
</script>
